<template>
  <div class="user-container">
    <div class="main-info-title fs18 flex flex-row-center">
      <span>用户</span>
    </div>
    <HHsearch
      ref="search"
      :search-options="searchOptions"
      :btn-option="2"
      @search="search"
      @reset="reset"
      @export="handleExport"
    ></HHsearch>
    <HHtable
      ref="table"
      :border="true"
      :total="total"
      :height="400"
      :table-column="tableColumn"
      :table-data="tableData"
      @page-click="pageClick"
    ></HHtable>
  </div>
</template>

<script>
  import HHsearch from '@/components/HH-search'
  import HHtable from '@/components/HH-table'
  import { getUserList } from '@/api/users'
  export default {
    components: {
      HHsearch,
      HHtable,
    },
    data() {
      return {
        total: 0,
        params: {
          pageNum: 1,
          pageSize: 10,
          phone: '',
          ranking: '',
          score: '',
          username: '',
        },
        tableColumn: [
          {
            prop: 'username',
            label: '姓名',
          },
          {
            prop: 'phone',
            label: '电话',
          },
          {
            prop: 'openId',
            label: '微信openId',
          },
          {
            prop: 'geographicalPosition',
            label: '地理位置',
          },
          {
            prop: 'score',
            label: '分数',
          },
          {
            prop: 'ranking',
            label: '排位',
          },
          {
            prop: 'sex',
            label: '性别',
          },
          {
            prop: 'certificates',
            label: '证书',
          },
          // {
          //   prop: 'regions',
          //   label: '优先地区',
          // },
          {
            prop: 'censusRegister',
            label: '户籍地区',
          },
          {
            prop: 'likeSchoolNames',
            label: '关注院校',
          },
          {
            prop: 'height',
            label: '身高',
          },
          {
            prop: 'likeMajorNames',
            label: '喜欢专业',
          },
          {
            prop: 'createTimeStr',
            width: '150',
            label: '写入时间',
          },
        ],
        tableData: [],
        searchOptions: [
          {
            type: 'text',
            prop: 'username',
            span: 5,
            label: '姓名：',
            placeholder: '请输入搜索',
          },
          {
            type: 'text',
            prop: 'phone',
            label: '电话：',
            span: 5,
            placeholder: '请输入搜索',
          },
          {
            type: 'doubleText',
            prop: ['minScore', 'maxScore'],
            label: '分数：',
            span: 6,
            placeholder: ['请输入最小值', '请输入最大值'],
          },
          {
            type: 'doubleText',
            prop: ['minRanking', 'maxRanking'],
            label: '排位：',
            span: 6,
            placeholder: ['请输入最小值', '请输入最大值'],
          },
        ],
      }
    },
    mounted() {
      this.initData()
    },
    methods: {
      initData() {
        this.getUserList()
      },
      getUserList() {
        this.$refs.table.loading = true
        getUserList(this.params).then((res) => {
          if (res.code === 200) {
            this.total = res.data.total
            this.tableData = res.data.result
            setTimeout(() => {
              this.$refs.table.loading = false
            }, 1000)
          } else {
            this.$refs.table.loading = false
          }
        })
      },
      search(res) {
        console.log('res', res)
        const arr = Object.keys(res)
        for (let i = 0; i < arr.length; i++) {
          this.params[arr[i]] = res[arr[i]]
        }
        this.initData()
      },
      reset() {
        this.params = {
          pageNum: 1,
          pageSize: 10,
          phone: '',
          ranking: '',
          score: '',
          username: '',
        }
        this.$refs.search.removeFilterArray()
        this.initData()
      },
      handleExport() {
        const link = document.createElement('a')
        link.style.display = 'none'
        link.href = this.baseURL + '/hce/user/export.do'
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      },
      pageClick(pager) {
        this.params.pageNum = pager
        this.initData()
      },
    },
  }
</script>

<style lang="scss" scoped>
  @import '../../../assets/styles/common.css';
  .user-container {
    .main-info-title {
      position: relative;
      height: 60px;
      margin-bottom: 20px;
      border-bottom: 1px solid #eee;

      &:after {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 80px;
        height: 3px;
        content: '';
        background-color: #409eff;
        border-radius: 3px;
        transition: all 0.5s ease;
      }

      &:hover:after {
        width: 120px;
      }
    }
  }
</style>
